<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('export.export')"></Crumb>
        <div class="content">
            <el-button
                    v-if="urlAvailible('export_operate')"
                    type="primary"
                    @click="openAdd"
            >{{$t('export.add')}}
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        :placeholder="$t('export.search')"
                        prefix-icon="el-icon-search"
                ></el-input>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="exportList"
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <div v-for="(value,key) in scope.row.sendGoodsOrderInformation" :key="value">
                                <span>{{key}}</span>
                                <a v-for="item in (value ? value.split(','):[])" :href="item" :key="item"
                                   target="_blank" style="display: block">{{item | getName}}</a>
                                <!--<span style="display: inline-block;margin-left: 30px;"><a :href="value">{{value | getName}}</a></span>-->
                            </div>
                            <div>
                                <span>{{$t('export.boxDetail')}}: </span>
                                <a :href="scope.row.packingDetails">{{ scope.row.packingDetails | getName}}</a>
                            </div>
                            <div>
                                <span>sppb: </span>
                                <a :href="scope.row.sppb">{{ scope.row.sppb | getName }}</a>
                            </div>
                            <div>
                                <span>{{$t('export.shipDetail')}}: </span>
                                <a :href="scope.row.shipmentData">{{ scope.row.shipmentData | getName }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="$t('deli.index')"
                            type="index"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="shipInformation"
                            width="150px"
                            :label="$t('deli.shipInformation')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="originatingPort"
                            :label="$t('export.originatingPort')"
                            :filters="[{text:'ZJG',value:'ZJG'},{text:'SH',value:'SH'}]"
                            :filter-method="filterHandler"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="concentratedPortDateStr"
                            :label="$t('export.concentratedPortDateStr')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="leaveDateStr"
                            :label="$t('export.leaveDateStr')"
                            sortable
                    >
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            prop="destinationPort"
                            :label="$t('export.destinationPort')"
                            :filters="[{text:'POSO',value:'POSO'},{text:'WEDA',value:'WEDA'},{text:'JAK',value:'JAK'}]"
                            :filter-method="filterHandler"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="arrivalDateStr"
                            sortable
                            :label="$t('export.arrivalDateStr')"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="releaseDateStr"
                            sortable
                            :label="$t('export.releaseDateStr')"
                    >
                    </el-table-column>
                    <el-table-column

                            :label="$t('export.status')"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.exportStatus?statusList[scope.row.exportStatus].label:''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="100px"
                    >
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="openEdit(scope.row)"
                                       v-if="urlAvailible('export_operate')" icon="el-icon-edit"></el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>

            <div class="modal-wrapper">
                <el-dialog
                        :title="$t('export.export')"
                        :show-close="false"
                        :close-on-click-modal="false"
                        :visible.sync="dialogVisible"
                        width="80%"
                >
                    <el-form ref="form" :model="ruleForm" :rules="rule" label-width="150px" style="text-align: left">
                        <div style="display: flex">
                            <div style="flex: 1">
                                <el-form-item :label="$t('deli.shipInformation')">
                                    <div class="ship">
                                        <el-input
                                                v-model="ruleForm.shipInformation"
                                                :placeholder="$t('deli.shipInformation')"
                                                size="small"
                                                :disabled="!urlAvailible('shanqi-export')"
                                                class="my-input ship-input"></el-input>
                                        <tip-list :data="shipList" @selected="selected"
                                                  v-if="urlAvailible('shanqi-export')"></tip-list>
                                    </div>
                                </el-form-item>
                                <el-form-item :label="$t('export.originatingPort')">
                                    <el-input
                                            v-model="ruleForm.originatingPort"
                                            placeholder="始发港"
                                            size="small"
                                            :disabled="!urlAvailible('shanqi-export')"
                                            class="my-input"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('export.concentratedPortDateStr')">
                                    <el-date-picker
                                            v-model="ruleForm.concentratedPortDateStr"
                                            type="date"
                                            placeholder="集港日期"
                                            :disabled="!urlAvailible('shanqi-export')"
                                            class="my-input"
                                            size="small"
                                            value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                                <el-form-item :label="$t('export.leaveDateStr')">
                                    <el-date-picker
                                            v-model="ruleForm.leaveDateStr"
                                            type="date"
                                            placeholder="开船日期"
                                            :disabled="!urlAvailible('shanqi-export')"
                                            size="small"
                                            class="my-input"
                                            value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                                <el-form-item :label="$t('export.destinationPort')" prop="destinationPort">
                                    <el-select
                                            v-model="ruleForm.destinationPort"
                                            placeholder="目的港"
                                            :disabled="!urlAvailible('shanqi-export')"
                                            class="my-input"
                                            size="small">
                                        <el-option
                                                v-for="item in [{t:'POSO',v:1},{t:'WEDA',v:2},{t:'MKS',v:4}]"
                                                :key="item.t"
                                                :label="item.t"
                                                :value="item.t">
                                        </el-option>
                                    </el-select>
                                    <!--<el-input v-model="ruleForm.destinationPort" placeholder="目的港" class="my-input" size="small"></el-input>-->
                                </el-form-item>
                                <el-form-item :label="$t('export.arrivalDateStr')">
                                    <el-date-picker
                                            v-model="ruleForm.arrivalDateStr"
                                            placeholder="到港日期"
                                            class="my-input"
                                            :disabled="!urlAvailible('shanqi-import')"
                                            value-format="yyyy-MM-dd"
                                            size="small"></el-date-picker>
                                </el-form-item>
                                <el-form-item :label="$t('export.releaseDateStr')">
                                    <el-date-picker
                                            v-model="ruleForm.releaseDateStr"
                                            placeholder="放行日期"
                                            class="my-input"
                                            :disabled="!urlAvailible('shanqi-import')"
                                            value-format="yyyy-MM-dd"
                                            size="small"></el-date-picker>
                                </el-form-item>
                            </div>
                            <div style="flex: 1;">
                                <el-form-item :label="$t('export.boxNo')">
                                    <el-input
                                            v-model="ruleForm.totalBox"
                                            placeholder="总箱数"
                                            class="my-input"
                                            :disabled="!urlAvailible('shanqi-export')"
                                            size="small"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('deli.sendGoodsContract')" prop="freightList">
                                    <el-select filterable
                                               v-model="ruleForm.freightList"
                                               :disabled="!urlAvailible('shanqi-export')"
                                               style="width: 100%"
                                               class="my-input"
                                               multiple
                                               placeholder="发运合同"
                                               size="small">
                                        <el-option
                                                v-for="item in deliveryList"
                                                :key="item.id"
                                                :label="item.sendGoodsContract"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('export.status')">
                                    <el-select v-model="ruleForm.exportStatus"
                                               class="my-input"
                                               placeholder="状态">
                                        <el-option
                                                v-for="item in statusList"
                                                :disabled="item.disabled"
                                                :key="item.key"
                                                :label="item.label"
                                                :value="item.key">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <div>
                                    <label for="purchase" class="label-btn">
                                        {{$t('export.shipDetail')}}
                                    </label>
                                    <span style="margin-left: 10px;">{{ruleForm.packingDetails | getName}}</span>
                                    <input type="file"
                                           :disabled="!urlAvailible('shanqi-export')"
                                           @change="fileChange($event,'packingDetails')"
                                           id="purchase"
                                           v-show="false">
                                </div>
                                <div>
                                    <label for="b" class="label-btn">
                                        {{$t('export.ship')}}
                                    </label>
                                    <span style="margin-left: 10px;">{{ruleForm.shipmentData | getName}}</span>
                                    <input type="file"
                                           @change="fileChange($event,'shipmentData')"
                                           id="b"
                                           v-show="false">
                                </div>
                                <div>
                                    <label for="c" class="label-btn">
                                        SPPB
                                    </label>
                                    <span style="margin-left: 10px;">{{ruleForm.sppb | getName}}</span>
                                    <input type="file"
                                           @change="fileChange($event,'sppb')"
                                           :disabled="!urlAvailible('shanqi-import')"
                                           id="c"
                                           v-show="false">
                                </div>
                            </div>
                        </div>

                        <div class="form-content">
                            <el-button type="primary"
                                       size="small"
                                       style="width: 100%;border:1px dashed;background: #fff;color: #409eff"
                                       @click="addInvoice"><i class="el-icon-plus"></i>
                            </el-button>
                            <div v-for="(item,idx) in ruleForm.invoice" :key="idx">
                                <div class="export-content">
                                    <h3 class="title">EXPORT</h3>
                                    <el-form-item :label="$t('export.bl')">
                                        <el-input v-model="item.billOfLading"
                                                  size="small"
                                                  :disabled="!urlAvailible('shanqi-export')"
                                                  placeholder="提单号"></el-input>
                                    </el-form-item>
                                    <el-form-item :label="$t('export.blDate')">
                                        <el-date-picker v-model="item.billOfLadingDateStr"
                                                        size="small"
                                                        :disabled="!urlAvailible('shanqi-export')"
                                                        value-format="yyyy-MM-dd" type="date"
                                                        placeholder="Date"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item :label="$t('export.invoice')">
                                        <el-input v-model="item.invoice"
                                                  size="small"
                                                  :disabled="!urlAvailible('shanqi-export')"
                                                  placeholder="Invoice"></el-input>
                                    </el-form-item>
                                    <el-form-item :label="$t('export.invoiceAmount1')">
                                        <el-currency-input :type=1
                                                           v-model="item.invoicePriceUS"
                                                           size="small"
                                                           :disabled="!urlAvailible('shanqi-export')"
                                                           placeholder="Invoice Price"/>
                                    </el-form-item>
                                    <el-form-item :label="$t('export.invoiceAmount')">
                                        <el-currency-input v-model="item.invoicePrice"
                                                           size="small"
                                                           :disabled="!urlAvailible('shanqi-export')"
                                                           style="width: 40%;"
                                                           placeholder="Invoice Price"/>
                                        <span style="margin:0 20px;">{{$t('export.rate')}}</span>
                                        <el-input v-model="item.curRate"
                                                  size="small"
                                                  :disabled="!urlAvailible('shanqi-export')"
                                                  placeholder="Currency Rate"
                                                  style="width: 40%"></el-input>
                                    </el-form-item>
                                    <el-form-item :label="$t('export.seaPrice')">
                                        <el-input v-model="item.cubic"
                                                  :placeholder="$t('export.cubic')"
                                                  :disabled="!urlAvailible('shanqi-export')"
                                                  size="small"
                                                  style="width: 50%;vertical-align: middle;"
                                                  @input="seaFrightChange($event,item)">
                                            <template slot="append">m³</template>
                                        </el-input>

                                        <el-input v-model="item.seaFrightUnitPrice"
                                                  placeholder="sea fright unit price"
                                                  size="small"
                                                  :disabled="!urlAvailible('shanqi-export')"
                                                  @input="seaFrightChange($event,item)"
                                                  style="width: 50%;vertical-align: middle;">
                                            <el-select v-model="item.seaFrightPriceCurrency"
                                                       placeholder="币种"
                                                       size="small"
                                                       slot="prepend"
                                                       style="width: 100px"
                                                       :disabled="!urlAvailible('shanqi-export')"
                                            >
                                                <el-option
                                                        v-for="item in ['$','¥']"
                                                        :key="item"
                                                        :label="item"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                        </el-input>
                                        <el-currency-input
                                                :type="item.seaFrightPriceCurrency === '¥' ? 0 : item.seaFrightPriceCurrency === '$' ? 1 : 10"
                                                v-model="item.seaFrightPrice"
                                                placeholder="Sea Fright Price"
                                                style="display: inline-block;width: 50%;"/>
                                    </el-form-item>
                                </div>
                                <div class="import-content">
                                    <h3 class="title">IMPORT</h3>
                                    <div style="display: flex;border-bottom: 1px solid #000">
                                        <div style="flex: 1">
                                            <el-form-item label="Form E Number">
                                                <el-input v-model="item.formENumber"
                                                          placeholder="Form E Number"
                                                          :disabled="!urlAvailible('shanqi-import')"
                                                          class="my-input" size="small"></el-input>
                                            </el-form-item>
                                            <el-form-item label="Form E Price">
                                                <el-currency-input v-model="item.formEPrice"
                                                                   :type=1
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   size="small"
                                                                   placeholder="Form E Price"
                                                                   class="my-input"/>
                                            </el-form-item>
                                            <el-form-item label="pib Aju">
                                                <el-input v-model="item.pibAju"
                                                          placeholder="pib Aju"
                                                          class="my-input"
                                                          :disabled="!urlAvailible('shanqi-import')"
                                                          size="small"></el-input>
                                            </el-form-item>
                                            <el-form-item label="BM">
                                                <el-currency-input v-model="item.bm"
                                                                   :type=2
                                                                   class="my-input"
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   size="small"
                                                                   placeholder="BM"
                                                                   @change="priceChange($event,item)"/>
                                            </el-form-item>
                                            <el-form-item label="PPN">
                                                <el-currency-input v-model="item.ppn"
                                                                   :type=2
                                                                   class="my-input"
                                                                   size="small"
                                                                   placeholder="PPN"
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   @change="priceChange($event,item)"/>
                                            </el-form-item>
                                            <el-form-item label="PPH">
                                                <el-currency-input v-model="item.pph"
                                                                   :type=2
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   class="my-input"
                                                                   size="small"
                                                                   placeholder="PPH"
                                                                   @change="priceChange($event,item)"/>
                                            </el-form-item>

                                        </div>
                                        <div style="flex: 1">
                                            <el-form-item label="Pib Rate">
                                                <el-currency-input :type=10
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   v-model="item.pibRate"
                                                                   class="my-input"
                                                                   size="small"
                                                                   placeholder="Pib Rate"/>
                                            </el-form-item>
                                            <el-form-item label="Pib Price(IDR)">
                                                <el-currency-input :type=2
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   v-model="item.pibPrice"
                                                                   class="my-input"
                                                                   size="small"
                                                                   placeholder="Pib Price"/>
                                            </el-form-item>
                                            <el-form-item label="HandlingFee/Cubic">
                                                <el-currency-input :type=2
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   v-model="item.handlingUnitPrice"
                                                                   placeholder="handling fee unit price"
                                                                   @change="handlingFeeChange($event,item)"
                                                                   size="small"
                                                                   class="my-input"/>
                                            </el-form-item>
                                            <el-form-item label="Handling Fee">
                                                <el-currency-input v-model="item.handlingFee"
                                                                   :type=2
                                                                   :disabled="!urlAvailible('shanqi-import')"
                                                                   class="my-input"
                                                                   size="small"
                                                                   placeholder="Handling Fee"
                                                                   style="width: 50%;"/>
                                            </el-form-item>
                                            <el-form-item label="HandlingFee PPN">
                                                <el-currency-input :value="item.handlingFee * 0.1"
                                                                   :type=2
                                                                   disabled
                                                                   class="my-input" size="small"
                                                                   placeholder="Handling Fee"
                                                                   style="width: 50%;"/>
                                            </el-form-item>
                                            <el-button type="text" @click="otherRate = !otherRate"
                                                       :icon="otherRate? 'el-icon-arrow-up  ' : ' el-icon-arrow-down'">
                                                Other
                                            </el-button>
                                        </div>
                                    </div>
                                    <div class="other" v-show="otherRate">
                                        <el-form-item label="Other Handling Fee">
                                            <el-input v-model.number="item.additionalHandlingFee"
                                                      class="my-input"
                                                      size="small"
                                                      :disabled="!urlAvailible('shanqi-import')"
                                                      placeholder="Other Handling Fee"
                                                      style="width: 50%;">
                                                <el-select v-model="item.otherPriceCurrency"
                                                           :placeholder="$t('invoice.currency')"
                                                           size="small"
                                                           :disabled="!urlAvailible('shanqi-import')"
                                                           slot="prepend"
                                                           style="width: 100px"
                                                >
                                                    <el-option
                                                            v-for="item in ['$','¥']"
                                                            :key="item"
                                                            :label="item"
                                                            :value="item">
                                                    </el-option>
                                                </el-select>
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="Other Rate">
                                            <el-currency-input v-model="item.additionalRate"
                                                               :type=10
                                                               class="my-input"
                                                               size="small"
                                                               :disabled="!urlAvailible('shanqi-import')"
                                                               placeholder="Other Rate"
                                                               style="width: 50%;"/>
                                        </el-form-item>
                                        <el-form-item label="Total Other Fee">
                                            <el-currency-input :value="item.additionalHandlingFee * item.additionalRate"
                                                               :type=2
                                                               disabled
                                                               class="my-input" size="small"
                                                               placeholder="Total"
                                                               style="width: 50%;"/>
                                        </el-form-item>
                                        <el-form-item label="Total Other Fee PPN">
                                            <el-currency-input
                                                    :value="item.additionalHandlingFee * item.additionalRate * 0.1"
                                                    :type=2
                                                    disabled
                                                    class="my-input"
                                                    size="small"
                                                    placeholder="PPN"
                                                    style="width: 50%;"/>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="finance-content">
                                    <h3 class="title">FINANCE</h3>
                                    <el-form-item label="Currency Rate">
                                        <el-input v-model="item.seaCurRate"
                                                  size="small"
                                                  @input="seaFrightChange($event,item)"
                                                  :disabled="!urlAvailible('shanqi-finance')"
                                                  placeholder="Currency Rate"
                                                  style="width: 50%"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="Ship Fee Date">
                                        <el-date-picker
                                                v-model="item.shipFeePayDate"
                                                type="date"
                                                placeholder="Ship Fee Date"
                                                :disabled="!urlAvailible('shanqi-finance')"
                                                class="my-input"
                                                size="small"
                                                value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="PIB Fee Date">
                                        <el-date-picker
                                                v-model="item.pibFeePayDate"
                                                type="date"
                                                placeholder="PIB Fee Date"
                                                :disabled="!urlAvailible('shanqi-finance')"
                                                class="my-input"
                                                size="small"
                                                value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="Clearance Fee Date">
                                        <el-date-picker
                                                v-model="item.clearanceFeeDate"
                                                type="date"
                                                placeholder="Clearance Fee Date"
                                                :disabled="!urlAvailible('shanqi-finance')"
                                                class="my-input"
                                                size="small"
                                                value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>

                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="close">Cancel</el-button>
                        <el-button type="primary" @click="submitForm" v-if="urlAvailible('export_operate')">{{$t('confirm')}}</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import tipList from '@/components/common/tipList'
    import mixins from '../../util/mixins'
    import authMixins from '../../util/authMixins'
    import {getExportList, addExport, modExport, getDeliveryList, getShipInfo, shipDetail} from "../../api/contract";
    import {upLoadFiles} from "../../api";
    import {ERROR_OK} from "../../util/config";
    import {getFileName} from "../../util";
    import * as math from 'mathjs'

    function printFn(value) {
        const precision = 14
        return Number(math.format(value, precision))
    }

    export default {
        name: "export",
        mixins: [mixins, authMixins],
        data() {
            return {
                otherRate: false,
                list: [],
                shipList: [],
                deliveryList: [],
                loading: true,
                ruleForm: {
                    shipInformation: '',
                    destinationPort: '',
                    arrivalDateStr: '',
                    leaveDateStr: '',
                    totalBox: '',
                    packingDetails: '',
                    shipmentData: '',
                    sppb: '',
                    freightList: [],
                    concentratedPortDateStr: '',
                    releaseDateStr: '',
                    originatingPort: '',
                    shipmentPrice: 0,
                    invoice: [{
                        billOfLading: '',
                        otherPriceCurrency: '',
                        handlingUnitPrice: 0,
                        seaFrightUnitPrice: 0,
                        cubic: 0,
                        invoicePriceUS: 0,
                        curRate: 4200,
                        seaCurRate: 1,
                        billOfLadingDate: '',
                        invoice: '',
                        invoicePrice: 0,
                        formENumber: '',
                        formEPrice: 0,
                        pibAju: '',
                        isBm: true,
                        pibPrice: 0,
                        seaFrightPrice: 0,
                        seaFrightPriceCurrency: '',
                        handlingFee: 0,
                        handlingFeePpn: 0,
                        ppn: 0,
                        bm: 0,
                        pph: 0,
                        pibRate: 0,
                        additionalHandlingFee: 0,
                        additionalCurrency: 0,
                        additionalRate: 0,
                        shipFeePayDate: '',
                        pibFeePayDate: '',
                        clearanceFeeDate: ''
                    }],
                    exportStatus: ''
                },
                fileList: [],
                rule: {
                    shipInformation: [
                        {required: true, message: '船名船次不能为空', trigger: 'blur'},
                    ],
                    freightList: [
                        {required: true, message: '发运合同不能为空', trigger: 'blur'}
                    ]
                },
                key: '',
                dialogVisible: false
            }
        },
        filters: {
            getName(name) {
                return getFileName(name)
            }
        },
        created() {
            this.getExportList();
            this.getDeliveryList();
            this.getShipInfo();
            this.statusList = [
                {key: 0, label: '出厂／Leave Factory', disabled: !this.urlAvailible('shanqi-export')},
                {key: 1, label: '开船／DEPARTURED', disabled: !this.urlAvailible('shanqi-export')},
                {key: 2, label: '到港／ARRIVED', disabled: !this.urlAvailible('shanqi-import')},
                {key: 3, label: '放行／SPPB', disabled: !this.urlAvailible('shanqi-import')},
                {key: 4, label: '入库／Stock In', disabled: !this.urlAvailible('shanqi-import')}]
        },
        computed: {
            exportList() {
                return this.list.filter(item => item.shipInformation.includes(this.key)).slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
            }
        },
        methods: {
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            bmChange(v, item) {
                this.priceChange(item.pibPrice, item)
            },
            priceChange(v, item) {
                if (item.bm && item.ppn && item.pph) {
                    const price = printFn(parseFloat(item.bm) + parseFloat(item.pph) + parseFloat(item.ppn))
                    this.$set(item, 'pibPrice', price);
                }
            },
            handlingFeeChange(v, item) {
                if (item.cubic && item.handlingUnitPrice) {
                    const price = printFn(parseFloat(item.cubic) * parseFloat(item.handlingUnitPrice))
                    this.$set(item, 'handlingFee', price);
                }
            },
            seaFrightChange(v, item) {
                this.handlingFeeChange(v, item);
                if (item.cubic && item.seaFrightUnitPrice) {
                    const price = printFn(parseFloat(item.cubic) * parseFloat(item.seaFrightUnitPrice) * parseFloat(item.seaCurRate))
                    this.$set(item, 'seaFrightPrice', price);
                } else {
                    this.$set(item, 'seaFrightPrice', 0);
                }
            },
            async selected(ship) {
                this.ruleForm.shipInformation = ship;
                const {status, data} = await shipDetail(ship);
                if (status === ERROR_OK) {
                    this.ruleForm.originatingPort = data.originatingPort;
                    this.ruleForm.arrivalDateStr = data.arrivalDateStr;
                    this.ruleForm.concentratedPortDateStr = data.concentratedPortDateStr;
                    this.ruleForm.destinationPort = data.destinationPort;
                    this.ruleForm.leaveDateStr = data.leaveDateStr;
                    this.ruleForm.releaseDateStr = data.releaseDateStr;
                    this.ruleForm.shipDateStr = data.shipDateStr;
                    this.ruleForm.shipmentPrice = data.shipmentPrice;
                    this.ruleForm.packingDetails = data.packingDetails;
                }
            },
            async getShipInfo() {
                const {status, data} = await getShipInfo();
                if (status === ERROR_OK) {
                    this.shipList = data;
                }
            },
            clear() {
                this.ruleForm = {
                    otherPriceCurrency: '',
                    handlingUnitPrice: 0,
                    seaFrightUnitPrice: 0,
                    cubic: 0,
                    shipInformation: '',
                    destinationPort: '',
                    shipmentData: '',
                    sppb: '',
                    arrivalDateStr: '',
                    leaveDateStr: '',
                    totalBox: '',
                    concentratedPortDateStr: '',
                    releaseDateStr: '',
                    packingDetails: '',
                    originatingPort: '',
                    shipmentPrice: 0,
                    freightList: [],
                    invoice: [{
                        billOfLading: '',
                        curRate: 4200,
                        seaCurRate: 1,
                        billOfLadingDate: '',
                        invoicePriceUS: 0,
                        invoice: '',
                        invoicePrice: 0,
                        formENumber: '',
                        formEPrice: 0,
                        pibAju: '',
                        pibPrice: 0,
                        seaFrightPrice: 0,
                        seaFrightPriceCurrency: '',
                        handlingFee: 0,
                        handlingFeePpn: 0,
                        ppn: 0,
                        bm: 0,
                        pph: 0,
                        pibRate: 0,
                        additionalHandlingFee: 0,
                        additionalCurrency: 0,
                        additionalRate: 0,
                        shipFeePayDate: '',
                        pibFeePayDate: '',
                        clearanceFeeDate: ''
                    }],
                    exportStatus: ''
                };
            },
            addInvoice() {
                this.ruleForm.invoice.push({
                    otherPriceCurrency: '',
                    handlingUnitPrice: 0,
                    seaFrightUnitPrice: 0,
                    cubic: 0,
                    billOfLading: '',
                    billOfLadingDate: '',
                    curRate: 4200,
                    seaCurRate: 1,
                    invoicePriceUS: 0,
                    invoice: '',
                    invoicePrice: 0,
                    formENumber: '',
                    formEPrice: 0,
                    pibAju: '',
                    pibPrice: 0,
                    seaFrightPrice: 0,
                    seaFrightPriceCurrency: '',
                    handlingFee: 0,
                    handlingFeePpn: 0,
                    ppn: 0,
                    bm: 0,
                    pph: 0,
                    pibRate: 0,
                    additionalHandlingFee: 0,
                    additionalCurrency: 0,
                    additionalRate: 0,
                    shipFeePayDate: '',
                    pibFeePayDate: '',
                    clearanceFeeDate: ''
                })
            },
            async getDeliveryList() {
                const {status, data} = await getDeliveryList(0);
                if (status === ERROR_OK) {
                    this.deliveryList = data
                }
            },
            submitForm() {
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        const {shipmentData, sppb, packingDetails, shipInformation, destinationPort, arrivalDateStr, leaveDateStr, totalBox, exportStatus, id, concentratedPortDateStr, releaseDateStr, originatingPort, shipmentPrice} = this.ruleForm;
                        let {freightList, invoice} = this.ruleForm;
                        freightList = freightList.join(',');
                        invoice.forEach(item => {
                            item.handlingFeePpn = item.handlingFee * 0.1
                        });
                        invoice = JSON.stringify(invoice);
                        if (this.ruleForm.id) {
                            const {status, msg} = await modExport({
                                shipmentData,
                                sppb,
                                packingDetails,
                                id,
                                shipInformation,
                                destinationPort,
                                arrivalDateStr,
                                leaveDateStr,
                                totalBox,
                                exportStatus,
                                freightList,
                                invoice,
                                concentratedPortDateStr,
                                releaseDateStr,
                                originatingPort,
                                shipmentPrice
                            });
                            if (status === ERROR_OK) {
                                this.$notify.success('修改出口单成功');
                                this.reduceConsignment();
                                this.clear();
                                this.getExportList();
                                this.dialogVisible = false
                            } else {
                                this.$notify.error(msg)
                            }
                        } else {
                            const {status, msg} = await addExport({
                                shipmentData,
                                sppb,
                                packingDetails,
                                shipInformation,
                                destinationPort,
                                arrivalDateStr,
                                leaveDateStr,
                                totalBox,
                                exportStatus,
                                freightList,
                                invoice,
                                concentratedPortDateStr,
                                releaseDateStr,
                                originatingPort,
                                shipmentPrice
                            });
                            if (status === ERROR_OK) {
                                this.$notify.success('添加出口单成功');
                                this.reduceConsignment()
                                this.clear();
                                this.getExportList();
                                this.dialogVisible = false
                            } else {
                                this.$notify.error(msg)
                            }
                        }
                    }
                })
            },
            reduceConsignment() {
                const freightList = this.ruleForm.freightList;
                this.deliveryList.forEach((item, idx) => {
                    freightList.forEach(f => {
                        if (item.id === f) {
                            this.deliveryList.splice(idx, 1);
                        }
                    })
                })
            },
            async getExportList() {
                const {status, data, msg} = await getExportList();
                if (status === ERROR_OK) {
                    this.list = data;
                    this.loading = false
                } else {
                    this.$notify.error(msg)
                }
            },
            async fileChange(e, label) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('upload_file', item)
                });
                const {success, file_path} = await upLoadFiles(formData);
                if (success) {
                    this.$set(this.ruleForm, label, file_path[0])
                }
            },
            openAdd() {
                this.clear();
                this.getDeliveryList();
                this.dialogVisible = true
            },
            close() {
                if (this.ruleForm.shipInformation) {
                    if (window.confirm('表单未提交是否关闭')) {
                        if (this.ruleForm.id) {
                            this.deliveryList.pop()
                        }
                        this.dialogVisible = false
                    }
                } else {
                    this.dialogVisible = false
                }
            },
            openEdit(row) {
                if (row.sendContactNumber) {
                    const delivery = Object.keys(row.sendContactNumber).map(item => {
                        return {id: parseInt(item, 10), sendGoodsContract: row.sendContactNumber[item]}
                    });
                    delivery.forEach(item => {
                        const target = this.deliveryList.find(f => {
                            return item.id === f.id
                        });
                        if (!target) {
                            this.deliveryList.push(item)
                        }
                    });
                }
                this.ruleForm = {
                    ...row,
                    freightList: row.freightList.toString().split(',').map(item => parseInt(item, 10)),
                    invoice: JSON.parse(row.invoice)
                };
                this.dialogVisible = true
            }
        },
        watch: {
            exportList(list) {
                this.total = list.length
            }
        },
        components: {
            Crumb, Search, tipList
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    @import "../../css/variable";

    .content {
        @include content
    }

    .form-content {
        border: 1px dashed #ddd;
        background: #eee;
        position: relative;
        margin-bottom: 20px;
    }

    .export-content {
        background: #ddd;
    }

    .import-content {
        background: #ddd;
    }

    .finance-content {
        background: #ddd;
    }

    .title {
        text-align: center;
    }

    .label-btn {
        @include linkBtn
    }

    .ship {
        position: relative;
        &:hover {
            .shipList {
                display: block;
            }
        }
    }

    .label-btn {
        display: block;
        width: 150px;
        height: 30px;
        line-height: 30px;
        background-color: $bg-theme;
        color: white;
        padding: 0 5px;
        cursor: pointer;
        border-radius: 3px;
        text-align: center;
    }

    .file-list {
        font-size: 16px;
        .file-item {
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid #ddd;

        }
    }
</style>